@mixin flex($justify:center,$align:center,$direction:row) {
	display: flex;
	justify-content: $justify;
	align-items: $align;
	flex-direction: $direction;
}
@mixin bgm($name) {
	// background-image:url("../common/images/partner/"+$name);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
@mixin withdraw-box($left:30rpx) {
	width: 690rpx;
	position: absolute;
	bottom: 0;
	left: $left;
	background-color: #fff;
	padding: 32rpx;
	border-radius: 16rpx 16rpx 0 0;
	@include flex(space-between,center);
	.withdraw-amount {
		@include flex(flex-start,center);
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
		.withdraw-amount-value {
			margin-left: 12rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #E84445;
			line-height: 50rpx;
		}
	}
	.withdraw-button{
		@include flex(center,center);
		width: 150rpx;
		height: 60rpx;
		background: #FF4544;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
}

view {
	box-sizing: border-box;
}

.coin-conversion {
		padding-bottom: 30rpx;
	}

	.flex-left {
		@include flex(flex-start);
	}

	.stats {
		background-color: #FF4544;
		width: 750rpx;
		height: 270rpx;
		@include flex(space-around, center);

		.stats-item {
			.stats-title {
				text-align: center;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.75);
				line-height: 33rpx;
			}

			.stats-value {
				text-align: center;
				margin-top: 8rpx;
				font-size: 56rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 68rpx;
			}
		}
	}


	.sets {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 60rpx;

		.sets-head {
			@include flex(space-between, center);

			.sets-title {
				font-size: 32rpx;
				color: #303133;
				line-height: 45rpx;
			}

			.sets-link {
				font-size: 24rpx;
				color: #606266;
				line-height: 33rpx;
				text-decoration: underline;
			}
		}

		.set-list {
			margin-top: 30rpx;
			@include flex(flex-start);
			flex-wrap: wrap;

			.set-item {
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				padding: 32rpx 20rpx;
				width: 330rpx;
				height: 218rpx;
				background: rgba(255, 69, 68, 0.1);
				border-radius: 16rpx;
				border: 2rpx solid transparent;

				&:nth-child(2n) {
					margin-right: 0;
				}

				&.selected {
					border-color:#FF4544;
				}

				.set-value {
					text-align: center;
					margin-bottom: 26rpx;
					font-size: 36rpx;
					color: #FF4544;
					line-height: 50rpx;
				}

				.set-consume {
					margin-bottom: 6rpx;

					&:last-child {
						margin-bottom: 0;
					}

					@include flex(space-between);

					.set-consume-icon {
						width: 32rpx;
						height: 32rpx;

						&.coin {
							@include bgm('icon-gold-coin.png');
						}

						&.point {
							@include bgm('icon-point.png');
						}
					}

					.set-consume-name {
						margin-left: 8rpx;
						font-size: 24rpx;
						color: #606266;
						line-height: 34rpx;
					}

					.set-consume-value {
						font-size: 24rpx;
						color: #909399;
						line-height: 34rpx;
					}
				}
			}
		}
	}


	.butt {
		width: 690rpx;
		height: 88rpx;
		border-radius: 44rpx;
		@include flex(center, center);
	}

	.butt-red-fill {
		margin-left: 0;
		margin-top: 40rpx;
		background: #FF4544;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 32rpx;

		&[disabled] {
			opacity: 0.3;
			background: #FF4544 !important;
			font-size: 32rpx;
			color: #FFFFFF !important;
		}

		&::after {
			display: none;
		}
	}

	.description {
		margin: 30rpx;
		padding: 30rpx;
		// width: 690rpx;
		background: #EBEBEB;
		border-radius: 16rpx;

		.description-title {
			text-align: center;
			font-size: 28rpx;
			color: #303133;
			line-height: 40rpx;
			margin-bottom: 24rpx;
		}

		.description-content {
			font-size: 28rpx;
			color: #909399;
			line-height: 40rpx;
		}
	}
